<template>
  <div>
    <!-- 搜索条 -->
      <div class="search">
          <div class="search-item">
              <icon type='search'/>
                <span>搜索</span>
          </div>
      </div>
      <!-- 轮播图 -->
      <swiper indicator-dots=true autoplay>
        <swiper-item :key="index" v-for="(item,index) in swiperData">
          <img :src="item.image_src" class="slide-image">
        </swiper-item>
      </swiper>
      <!-- 菜单 -->
      <div class="menu">
        <div class="menu-item" :key="index" v-for="(item,index) in menuData">
          <img :src="item.image_src" >
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="floor" :key='index' v-for="(item,index) in floorData">
        <div class="floor-title">
          <img :src="item.floor_title.image_src" />
        </div>
        <div class="floor-content">
          <div class="left">
            <img :src="item.leftImagePath" >
          </div>
          <div class="right">
            <img :key='i' v-for="(item,i) in item.product_list" :src="item.image_src">
          </div>
        </div>
      </div>
      <!-- 回到顶部 -->
      <div @click='toTop()' class="top" v-show='flag'>
      ︿
      <p>顶部</p>
    </div>
  </div>  
</template>
<script>
import request from '../../utils/request.js'
export default {
  data () {
    return {
      //轮播图数据
      swiperData:[],
      //菜单数据
      menuData:[],
      //商品列表数据
      floorData:[],
      //控制回到顶部按钮显示隐藏标志位
      flag:false
    }
  },
  computed: {
    floorData1 () {
      return this.floorData.map(item=>{
        item.leftImagePath = item.product_list[0].image_src
        item.product_list = item.product_list.filter((item,index)=>{
          return index>0
        })
        return item;
      })
    }
  },
  methods: {
    toTop (){
      mpvue.pageScrollTo({
        scrollTop:0
      })
    },
    async initData () {
      // 初始化数据
      // 轮播图数据
      let swiperRes = await request('home/swiperdata')
      this.swiperData = swiperRes.data.message
      // 菜单数据
      let menuRes = await request('home/catitems')
      this.menuData = menuRes.data.message
      // 商品列表数据
      let floorRes = await request('home/floordata')
      this.floorData = floorRes.data.message
    }
  },
  created() {
    // wx.request({
    //   url:'https://www.ehomespace.com/api/public/v1/home/swiperdata',
    //   method:'get',
    //   success:(res)=>{
    //     this.swiperData = res.data.message;
    //   }
    // })
    // 使用Promise发送请求
    // request('home/swiperdata').then(res => {
    //   this.swiperData = res.data.message
    // })
    //使用async/await发送请求
    // //轮播图数据获取
    // let swiperRes = await request('home/swiperdata')
    // this.swiperData = swiperRes.data.message
    // //菜单数据获取
    // let menuRes = await request('home/catitems')
    // this.menuData = menuRes.data.message
    this.initData()
  },
  onPageScroll(e) {
    this.flag = e.scrollTop > 50
    console.log(this.flag)
  },
  onPullDownRefresh() {
    this.initData()
  }
}
</script>
<style scoped lang="less">
@import './main.less';
</style>
